<template>
  <div>
    <h3>
      !!!模拟按钮权限,由于这个项目后端没有返回按钮权限,直接使用本地存储来模拟按钮权限了
    </h3>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <p>{{ scope.row.name }}</p>
        </template>
      </el-table-column>
      <el-table-column label="住址" width="180">
        <template slot-scope="scope">
          <p>{{ scope.row.address }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button size="mini" type="primary" v-hasMenu="'creat'"
            >新增</el-button
          >
          <el-button size="mini" type="success" v-hasMenu="'edit'"
            >修改</el-button
          >
          <el-button size="mini" type="danger" v-hasMenu="'delete'"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
      

<script>
import hasMenu from "@/utils/hasMenu";
export default {
  directives: { hasMenu }, //自定义指令局部引入   全局 Vue.directives('名字',{bind(el,bindings){},inserted(el, bindings) })
  data() {
    return {
      tableData: [
        {
          name: "王小虎1",
          address: "上海市",
        },
        {
          name: "王小虎2",
          address: "北京市",
        },
      ],
    };
  },
  created() {
    //模拟登录后端返回的按钮权限列表
    let arr = ["creat", "edit", "delete"];
    localStorage.setItem("permission", JSON.stringify(arr));
  },
  mounted() {},
  methods: {},
  computed: {},
  watch: {},
};
</script>

<style scoped lang='scss' >
</style>
